<!-- 投票系统组件 -->
<template>
  <view v-if="showVoteSection" class="vote-system">
    <!-- 进行中的投票 -->
    <view v-if="activeVote" class="active-vote">
      <view class="vote-header">
        <text class="vote-title">{{ getVoteTypeText(activeVote.voteType) }}</text>
        <view class="vote-status">
          <text>{{ getVoteStatusText(activeVote.status) }}</text>
        </view>
      </view>
      
      <view class="vote-content">
        <text class="vote-reason">原因：{{ activeVote.reason }}</text>
        <view class="vote-progress">
          <text>投票进度：{{ activeVote.approvalVotes }}/{{ activeVote.totalVoters }}</text>
          <view class="progress-bar">
            <view 
              class="progress-fill" 
              :style="{ width: getProgressPercentage() + '%' }"
            ></view>
          </view>
        </view>
        <view class="vote-time">
          <text>剩余时间：{{ getRemainingTime() }}</text>
        </view>
      </view>
      
      <!-- 投票按钮 -->
      <view v-if="!hasVoted" class="vote-actions">
        <button 
          class="approve-btn" 
          @click="handleVote(true)"
          :disabled="voting"
        >
          <text>同意</text>
        </button>
        <button 
          class="reject-btn" 
          @click="handleVote(false)"
          :disabled="voting"
        >
          <text>反对</text>
        </button>
      </view>
      
      <!-- 已投票状态 -->
      <view v-else class="voted-status">
        <text>您已投票：{{ userVote ? '同意' : '反对' }}</text>
      </view>
    </view>

    <!-- 发起投票按钮 -->
    <view v-else-if="canInitiateVote" class="initiate-vote">
      <view class="initiate-info">
        <text class="initiate-title">发起投票</text>
        <text class="initiate-desc">可以发起踢人投票或弹劾队长投票</text>
      </view>
      <view class="initiate-actions">
        <button 
          class="remove-member-btn" 
          @click="$emit('initiate-remove-vote')"
        >
          <text>踢人投票</text>
        </button>
        <button 
          v-if="!isTeamLeader" 
          class="impeach-btn" 
          @click="$emit('initiate-impeach-vote')"
        >
          <text>弹劾队长</text>
        </button>
      </view>
    </view>

    <!-- 投票历史 -->
    <view v-if="voteHistory.length > 0" class="vote-history">
      <text class="history-title">投票历史</text>
      <view 
        v-for="vote in voteHistory" 
        :key="vote.id" 
        class="history-item"
      >
        <view class="history-header">
          <text class="history-type">{{ getVoteTypeText(vote.voteType) }}</text>
          <text class="history-status">{{ getVoteStatusText(vote.status) }}</text>
        </view>
        <text class="history-reason">{{ vote.reason }}</text>
        <text class="history-result">结果：{{ vote.approvalVotes }}/{{ vote.totalVoters }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// Props
const props = defineProps({
  showVoteSection: {
    type: Boolean,
    default: false
  },
  activeVote: {
    type: Object,
    default: null
  },
  voteHistory: {
    type: Array,
    default: () => []
  },
  canInitiateVote: {
    type: Boolean,
    default: false
  },
  isTeamLeader: {
    type: Boolean,
    default: false
  },
  hasVoted: {
    type: Boolean,
    default: false
  },
  userVote: {
    type: Boolean,
    default: null
  }
})

// Emits
const emit = defineEmits([
  'vote',
  'initiate-remove-vote',
  'initiate-impeach-vote'
])

// 响应式数据
const voting = ref(false)

// 获取投票类型文本
const getVoteTypeText = (voteType) => {
  const typeMap = {
    1: '踢人投票',
    2: '弹劾队长',
    3: '选举新队长'
  }
  return typeMap[voteType] || '未知类型'
}

// 获取投票状态文本
const getVoteStatusText = (status) => {
  const statusMap = {
    0: '进行中',
    1: '已通过',
    2: '已拒绝',
    3: '已超时'
  }
  return statusMap[status] || '未知状态'
}

// 获取进度百分比
const getProgressPercentage = () => {
  if (!props.activeVote || !props.activeVote.totalVoters) return 0
  return Math.round((props.activeVote.approvalVotes / props.activeVote.totalVoters) * 100)
}

// 获取剩余时间
const getRemainingTime = () => {
  if (!props.activeVote || !props.activeVote.createdAt) return '未知'
  // 这里需要根据实际的时间计算逻辑来实现
  return '24小时'
}

// 处理投票
const handleVote = async (approve) => {
  if (voting.value) return
  
  voting.value = true
  try {
    emit('vote', {
      voteId: props.activeVote.id,
      approve: approve
    })
  } finally {
    voting.value = false
  }
}
</script>

<style scoped>
.vote-system {
  margin: 20rpx 0;
  padding: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.active-vote {
  border: 2rpx solid #2196F3;
  border-radius: 12rpx;
  padding: 20rpx;
  background: #f8f9ff;
}

.vote-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.vote-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.vote-status {
  background: #2196F3;
  color: white;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.vote-content {
  margin-bottom: 20rpx;
}

.vote-reason {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
  display: block;
}

.vote-progress {
  margin-bottom: 15rpx;
}

.progress-bar {
  width: 100%;
  height: 8rpx;
  background: #e0e0e0;
  border-radius: 4rpx;
  margin-top: 10rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #4CAF50;
  transition: width 0.3s ease;
}

.vote-time {
  font-size: 24rpx;
  color: #ff9800;
}

.vote-actions {
  display: flex;
  gap: 20rpx;
}

.approve-btn,
.reject-btn {
  flex: 1;
  padding: 16rpx 32rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
}

.approve-btn {
  background: #4CAF50;
  color: white;
}

.reject-btn {
  background: #f44336;
  color: white;
}

.voted-status {
  text-align: center;
  padding: 20rpx;
  background: #e8f5e8;
  border-radius: 12rpx;
  color: #4CAF50;
  font-size: 28rpx;
  font-weight: 500;
}

.initiate-vote {
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  border: 2rpx dashed #dee2e6;
}

.initiate-info {
  margin-bottom: 20rpx;
}

.initiate-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.initiate-desc {
  font-size: 24rpx;
  color: #666;
  display: block;
}

.initiate-actions {
  display: flex;
  gap: 20rpx;
}

.remove-member-btn,
.impeach-btn {
  flex: 1;
  padding: 16rpx 32rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
}

.remove-member-btn {
  background: #ff9800;
  color: white;
}

.impeach-btn {
  background: #f44336;
  color: white;
}

.vote-history {
  margin-top: 30rpx;
}

.history-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.history-item {
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  margin-bottom: 15rpx;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.history-type {
  font-size: 26rpx;
  font-weight: 500;
  color: #333;
}

.history-status {
  font-size: 24rpx;
  color: #666;
}

.history-reason {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
  display: block;
}

.history-result {
  font-size: 24rpx;
  color: #4CAF50;
  font-weight: 500;
}
</style>
